<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>药品信息页面</title>
		<!-- 引入 element-ui 样式文件，需要网络，否则失效 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入 vue 文件，使用本地下载的-->
		<script type="text/javascript" src="js/vue.min.js"></script>
		<!-- 引入 axios 库文件，使用本地下载的-->
		<script type="text/javascript" src="js/axios.min.js"></script>
		<!-- 引入组件库文件，需要网络，否则失效 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			/* 图片通用样式 */
			.image {
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 修改药品信息，先查询药品详细信息后再进行修改 -->
			<!-- 使用了 Dialog 对话框组件 -->
			<el-dialog title="需要修改的药品信息如下" :visible.sync="updateDialogVisible" width="30%">
				<!-- 使用了 Form 表单组件 -->
				<el-form ref="medicine" label-width="80px">
					<!-- 说明：这里给图片做了判断 -->
					<el-form-item label="图片">
						<input type="file" style="display: none;" ref="updateFile" @change="fileClick()">
						<img v-if="update.mpicture" :src="'http://192.168.0.102:280/hospital-pic/' + update.mpicture"
							alt="暂无图片" class="image" @click="$refs.updateFile.click()">
						<img v-else :src="previewSrc" class="image" @click="$refs.updateFile.click()">
					</el-form-item>
					<el-form-item label="进价">
						<el-input v-model="update.mpurchase"></el-input>
					</el-form-item>
					<el-form-item label="售价">
						<el-input v-model="update.mselling"></el-input>
					</el-form-item>
					<el-form-item label="名称">
						<el-input v-model="update.mname"></el-input>
					</el-form-item>
					<el-form-item label="类型">
						<el-select v-model="value" placeholder="请选择类型">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="简单描述">
						<el-input v-model="update.mdescribe"></el-input>
					</el-form-item>
					<el-form-item label="保质期">
						<el-input v-model="update.mqualityDate"></el-input>
					</el-form-item>
					<el-form-item label="详细信息">
						<el-input v-model="update.mdescription"></el-input>
					</el-form-item>
					<el-form-item label="生产厂商">
						<el-input v-model="update.mmanufacturer"></el-input>
					</el-form-item>
					<el-form-item label="服用说明">
						<el-input v-model="update.mexplain"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input v-model="update.mremarks"></el-input>
					</el-form-item>
				</el-form>
				<!-- 自定义组件样式 -->
				<div class="update" style="margin-left: 200px;">
					<span slot="footer" class="dialog-footer">
						<el-button type="warning" @click="updateExit">取 消</el-button>
						<el-button type="primary" @click="updateMedicine">修 改</el-button>
					</span>
				</div>
			</el-dialog>

			<!-- 添加药品信息 -->
			<!-- 使用了 Dialog 对话框组件 -->
			<el-dialog title="请输入药品信息" :visible.sync="addDialogVisible" width="30%">
				<!-- 使用了 Form 表单组件 -->
				<el-form ref="add" label-width="80px">
					<el-form-item label="编号">
						<el-input v-model="add.mId" placeholder="请输入药品编号"></el-input>
					</el-form-item>
					<!-- 说明：这里给图片做了判断 -->
					<el-form-item label="图片">
						<input type="file" style="display: none;" ref="multipartFile" @change="addFile()">
						<img :src="fileSrc" @click="$refs.multipartFile.click()" class="image">
					</el-form-item>
					<el-form-item label="进价">
						<el-input type="number" v-model="add.mPurchase" placeholder="请输入药品进价"></el-input>
					</el-form-item>
					<el-form-item label="售价">
						<el-input type="number" v-model="add.mSelling" placeholder="请输入药品售价"></el-input>
					</el-form-item>
					<el-form-item label="名称">
						<el-input v-model="add.mName" placeholder="请输入药品名称"></el-input>
					</el-form-item>
					<el-form-item label="类型">
						<!-- 使用了 Select 选择器组件 -->
						<el-select v-model="value" placeholder="请选择类型">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="简单描述">
						<el-input v-model="add.mDescribe" placeholder="请输入药品简单描述"></el-input>
					</el-form-item>
					<el-form-item label="保质期">
						<el-input v-model="add.mQualityDate" placeholder="请输入药品保质期"></el-input>
					</el-form-item>
					<el-form-item label="详细信息">
						<el-input v-model="add.mDescription" placeholder="请输入药品详细信息"></el-input>
					</el-form-item>
					<el-form-item label="生产厂商">
						<el-input v-model="add.mManufacturer" placeholder="请输入药品生产厂商"></el-input>
					</el-form-item>
					<el-form-item label="服用说明">
						<el-input v-model="add.mExplain" placeholder="请输入药品生产厂商"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input v-model="add.mRemarks" placeholder="请输入药品生产厂商"></el-input>
					</el-form-item>
				</el-form>
				<!-- 自定义了组件样式 -->
				<div style="margin-left: 200px;">
					<span slot="footer" class="dialog-footer">
						<el-button type="warning" @click="addClose()">取 消</el-button>
						<el-button type="primary" @click="addMedicine()">添 加</el-button>
					</span>
				</div>
			</el-dialog>

			<!-- 查询药品详细信息 -->
			<!-- 使用了 Dialog 对话框组件 -->
			<!-- 说明：因为查询药品详细信息是只读是，所以设置 readonly="true" 这个属性即可 -->
			<el-dialog title="药品详细信息如下" :visible.sync="getDialogVisible" width="30%">
				<!-- 使用了 Form 表单组件 -->
				<el-form ref="medicine" label-width="80px">
					<el-form-item label="编号">
						<el-input v-model="medicine.mid" readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="图片">
						<img :src="'http://192.168.0.102:280/hospital-pic/' + medicine.mpicture" readonly="true"
							alt="暂无图片" class="image">
					</el-form-item>
					<el-form-item label="进价">
						<el-input v-model="medicine.mpurchase" readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="售价">
						<el-input v-model="medicine.mselling" readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="名称">
						<el-input v-model="medicine.mname" readonly="true"></el-input>
					</el-form-item>
					<!-- 说明：可以直接在前端做判断，让数字对应代表的后台数据显示 -->
					<el-form-item label="类型">
						<!-- <el-input v-model="medicine.mtype"></el-input> -->
						<el-input v-if="medicine.mtype == 1" value="处方药" readonly="true"></el-input>
						<el-input v-if="medicine.mtype == 2" value="中药" readonly="true"></el-input>
						<el-input v-if="medicine.mtype == 3" value="西药" readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="简单描述">
						<el-input v-model="medicine.mdescribe" readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="保质期">
						<el-input v-model="medicine.mqualityDate" readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="详细信息">
						<el-input v-model="medicine.mdescription" readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="生产厂商">
						<el-input v-model="medicine.mmanufacturer" readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="服用说明">
						<el-input v-model="medicine.mexplain" readonly="true"></el-input>
					</el-form-item>
					<el-form-item label="备注">
						<el-input v-model="medicine.mremarks" readonly="true"></el-input>
					</el-form-item>
				</el-form>
				<!-- 自定义了组件样式 -->
				<div style="margin-left: 270px;">
					<span slot="footer" class="dialog-footer">
						<el-button type="warning" @click="getExit">退 出</el-button>
					</span>
				</div>
			</el-dialog>

			<!-- 显示所有药品信息 -->
			<!-- 使用了 Table 表格组件 -->
			<template>
				<!-- 说明：max-height="580" 此时表格所需高度大于最大高度，则会显示一个滚动条 -->
				<!-- 说明：fixed 固定列属性，接收 left 或者 right，分别表示左边固定还是右边固定 -->
				<el-table :data="tableData" border style="width: 100%;" max-height="580">
					<el-table-column fixed prop="mid" label="药品编号" width="100">
					</el-table-column>
					<el-table-column fixed prop="mpicture" label="药品图片" width="120">
						<!-- 说明：因为外部有 template 作用域包裹，所以这里也需要有，否则失效 -->
						<template slot-scope="scoped">
							<img :src="'http://192.168.0.102:280/hospital-pic/'+ scoped.row.mpicture" class="image"
								alt="暂无图片">
						</template>
					</el-table-column>
					<el-table-column type="number" prop="mpurchase" label="药品进价" width="120">
					</el-table-column>
					<el-table-column type="number" prop="mselling" label="药品售价" width="120">
					</el-table-column>
					<el-table-column prop="mname" label="药品名称" width="120">
					</el-table-column>
					<el-table-column prop="mtype" label="药品类型" width="120">
						<!-- 说明：可以直接在前端做判断，让数字对应代表的后台数据显示 -->
						<!-- 说明：因为外部使用了 template 作用域包裹，所以这里也需要有，否则失效 -->
						<template slot-scope="scoped">
							<span v-if='scoped.row.mtype == 1'>处方药</span>
							<span v-if='scoped.row.mtype == 2'>中药</span>
							<span v-if='scoped.row.mtype == 3'>西药</span>
						</template>
					</el-table-column>
					<el-table-column prop="mdescribe" label="药品简单描述" width="120">
					</el-table-column>
					<el-table-column prop="mqualityDate" label="药品保质期" width="120">
					</el-table-column>
					<el-table-column prop="mdescription" label="药品详细信息" width="120">
					</el-table-column>
					<el-table-column prop="mmanufacturer" label="药品生产厂商" width="120">
					</el-table-column>
					<el-table-column prop="mexplain" label="药品服用说明" width="120">
					</el-table-column>
					<el-table-column fixed="right" prop="mremarks" label="药品备注" width="120">
					</el-table-column>
					<el-table-column fixed="right" label="操作列表" width="200">
						<!-- 说明：因为外部有 template 作用域包裹，所以要使用 scopw.row -->
						<!-- 说明：size="small" 让组件字体变小 -->
						<template slot-scope="scope">
							<!-- 查看详细信息方法 -->
							<el-button type="text" @click="getById(scope.row.mid)">查看</el-button>
							<!-- 添加信息方法 -->
							<el-button type="text" @click="addDialogVisible = true">添加</el-button>
							<!-- 删除信息方法 -->
							<el-button type="text" @click="delMedicineById(scope.row.mid)">删除</el-button>
							<!-- 修改信息方法 -->
							<el-button type="text" @click="updateMedicineById(scope.row.mid)">修改</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>

			<!-- 分页方法 -->
			<!-- 使用了 Pagination 分页组件 -->
			<div class="block">
				<el-pagination background small @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="currentPage" :page-sizes="[1, 3, 5, 7]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>

		<!-- 引入外部 js 文件 -->
		<script src="js/common.js"></script>

		<script>
			let vue = new Vue({
				el: '#app',
				data: {
					// 修改药品信息的集合声明
					update: {},
					// 修改药品信息的对话框默认不显示
					updateDialogVisible: false,
					// 修改药品信息的图片声明
					previewSrc: '',

					// 添加药品信息对话框默认不显示
					addDialogVisible: false,
					// 添加药品信息集合声明
					add: {
						mId: '',
						mPurchase: '',
						mSelling: '',
						mName: '',
						mType: '',
						mDescribe: '',
						mQualityDate: '',
						mDescription: '',
						mManufacturer: '',
						mExplain: '',
						mRemarks: ''
					},
					// 添加药品信息类型字段数据的声明
					options: [{
						value: '1',
						label: '处方药'
					}, {
						value: '2',
						label: '中药'
					}, {
						value: '3',
						label: '西药'
					}],
					// 添加药品信息类型value值的声明
					value: '',
					// 添加药品信息图片的声明
					fileSrc: 'image/1.jpg',

					// 药品详细信息对话框默认不显示
					getDialogVisible: false,
					// 药品详细信息集合声明
					medicine: {},

					// 显示所有药品信息数组
					tableData: [],
					// 分页起始页，默认为 1
					currentPage: 1,
					// 分页当前页记录数，默认为 4
					pageSize: 4,
					// 分页总记录数，默认为 0
					total: 0,
				},
				methods: {
					// 查询完成后进行修改方法
					updateMedicine() {
						// 多数据及文件需要使用 FormData() 表单提交
						let one = new FormData()
						one.append('mId', this.update.mid)
						one.append('multipartFile', this.update.file)
						one.append('mPurchase', this.update.mpurchase)
						one.append('mSelling', this.update.mselling)
						one.append('mName', this.update.mname)
						// 药品类型使用了 select 选择框，这里需要修改
						one.append('mType', this.value)
						one.append('mDescribe', this.update.mdescribe)
						one.append('mQualityDate', this.update.mqualityDate)
						one.append('mDescription', this.update.mdescription)
						one.append('mManufacturer', this.update.mmanufacturer)
						one.append('mExplain', this.update.mexplain)
						one.append('mRemarks', this.update.mremarks)
						// 开始发送请求
						axios({
							method: 'put',
							url: '/medicine/updateMedicine',
							data: one
						}).then(r => {
							// 修改成功信息提示
							this.$message.success('修改成功')
							// 关闭对话框
							this.updateDialogVisible = false
							// 清空图片信息
							this.previewSrc = ''
							// 重新加载页面
							this.loadMedicine(this.currentPage, this.pageSize)
						})
					},
					// 修改药品信息取消按钮方法
					updateExit() {
						// 取消信息提示
						this.$message.warning('已取消修改药品信息')
						// 关闭对话框
						this.updateDialogVisible = false
					},
					// 修改药品信息图片点击事件方法
					fileClick() {
						this.update.mpicture = ''
						let file = this.$refs.updateFile.files[0]
						this.previewSrc = URL.createObjectURL(file)
						this.update.file = file
					},
					// 修改药品信息查询方法
					updateMedicineById(mid) {
						// 关闭对话框
						this.updateDialogVisible = true
						// 开始发送请求
						axios({
							method: 'get',
							url: '/medicine/getMedicineDetail?mId=' + mid
						}).then(r => {
							this.update = r.data.data
							this.previewSrc = this.update
							this.$message.success('查询修改信息成功')
						}).catch(err => {
							this.$message.error('查询单条记录失败！' + err)
						})
						/* // 重新赋值
						this.update = updateAll */
					},

					// 添加药品信息方法
					addMedicine() {
						// 打开对话框
						this.addDialogVisible = true
						// 代理图片上传操作
						const file = this.$refs.multipartFile.files[0]
						// 多数据及文件需要使用 FormData() 表单提交
						const addMedicine = new FormData()
						addMedicine.append('mId', this.add.mId)
						addMedicine.append('multipartFile', file)
						addMedicine.append('mPurchase', this.add.mPurchase)
						addMedicine.append('mSelling', this.add.mSelling)
						addMedicine.append('mName', this.add.mName)
						// 药品类型使用了 select 选择框，这里需要修改
						addMedicine.append('mType', this.value)
						addMedicine.append('mDescribe', this.add.mDescribe)
						addMedicine.append('mQualityDate', this.add.mQualityDate)
						addMedicine.append('mDescription', this.add.mDescription)
						addMedicine.append('mManufacturer', this.add.mManufacturer)
						addMedicine.append('mExplain', this.add.mExplain)
						addMedicine.append('mRemarks', this.add.mRemarks)
						// 开始发送请求
						axios({
							method: 'post',
							url: '/medicine/addMedicine',
							data: addMedicine
						}).then(r => {
							// 添加成功提示信息
							this.$message.success('添加成功')
							// 关闭对话框
							this.addDialogVisible = false
							// 清空图片信息并重新赋值
							this.fileSrc = 'image/1.jpg'
							// 清空集合中的数据
							this.add = {}
							// 清空药品类型的数据
							this.value = ''
							// 重新加载页面
							this.loadMedicine(this.currentPage, this.pageSize)
						}).catch(err => {
							// 错误信息提示
							this.$message.error('错误信息' + err)
							// 错误信息输出到控制台
							console.log("错误信息：" + err)
						})
					},
					// 添加药品对话框取消按钮方法
					addClose() {
						// 清空数据
						this.add = {}
						// 清空药品类型的数据
						this.value = ''
						// 退出信息提示
						this.$message.warning('已取消添加药品信息')
						// 关闭对话框
						this.addDialogVisible = false
					},
					// 添加药品信息图片点击事件方法
					addFile() {
						let file = this.$refs.multipartFile.files[0]
						this.fileSrc = URL.createObjectURL(file)
						this.addMedicine.mpicture = file
					},

					// 删除药品信息方法
					// 删除方法使用了 MessageBox 弹框组件
					delMedicineById(mid) {
						this.$confirm('此操作将永久删除该文件，是否继续?', '删除信息提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							// 开始发送请求
							axios({
								url: '/medicine/delMedicineGetById?mId=' + mid,
								method: 'post'
							}).then(r => {
								this.$message({
									type: 'success',
									message: '删除成功！'
								});
								// 删除成功后，重新加载页面
								this.loadMedicine(this.currentPage, this.pageSize);
							})
						}).catch(() => {
							this.$message({
								type: 'warning',
								message: '已取消删除'
							})
						})
					},

					// 查询药品详细信息方法
					getById(mid) {
						this.getDialogVisible = true
						axios({
							method: 'get',
							url: '/medicine/getMedicineDetail?mId=' + mid
						}).then(r => {
							// 赋值操作
							this.medicine = r.data.data
							// 成功信息提示
							this.$message.success('查询药品详细信息成功')
						}).catch(err => {
							// 失败信息提示
							this.$message.error('查询失败！' + err)
						})
					},
					// 查询单条信息退出按钮方法
					getExit() {
						// 退出信息提示
						this.$message.warning('已点击退出按钮')
						// 关闭对话框
						this.getDialogVisible = false;
					},

					// 查询所有药品信息并分页方法
					loadMedicine(pageNum, pageSize) {
						// 先清空数据再请求
						this.tableData = []
						// 总数量默认为 0
						this.total = 0
						axios({
							method: 'get',
							url: '/medicine/getAllAndPage?pageNum=' + pageNum + "&pageSize=" + pageSize,
						}).then(r => {
							this.tableData = r.data.data.list;
							this.total = r.data.data.total;
							this.currentPage = r.data.data.pageNum;
							this.pageSize = r.data.data.pageSize;
						}).catch(err => {
							// 失败信息提示
							this.$message.error('查询失败！' + err);
						})
					},
					// 每页条数方法
					handleSizeChange(v) {
						this.pageSize = v
						this.loadMedicine(this.currentPage, v)
					},
					// 当前页条数方法
					handleCurrentChange(v) {
						this.loadMedicine(v, this.pageSize)
					},
				},
				// 加载完成之前执行
				created() {
					this.loadMedicine(this.currentPage, this.pageSize);
				}
			})
		</script>
	</body>
</html>
